<template>
  <footer>
    <div class="Sharelinksbg">
      <div class="Sharelinks">
        <p @click.stop class="wenzi">Rainbow&nbsp;Bay
          <span class="Sharelinks-icon">
            <i @click="showWeiXinQrCode" class="iconfont icon-weixin"></i>
            <i @click="toggleShowEmail" class="iconfont icon-youjianduanxin"></i>
            <!--<i class="iconfont icon-zhifeiji"></i>-->
          </span>
        </p>
        <p class="Sharelinksbg_nav">
          Rainbow Bay fully absorbs the experience of DAPP market, and strives to create a game platform positioned in PVP. Through the block chain intelligent contract, players can provide a truly fair, safe and real entertainment environment, and strive to bring
          superior game experience to players.
        </p>
        <div @click.stop v-show="showQrcode || showEmail" class="foot-tip" style="display: none;">
          <div v-show="showQrcode" class="weichart-cont">
            <img :src="$config.footWechartQrcode" />
            <div>WeChat</div>
          </div>
          <div v-show="showEmail" class="email-cont">{{$config.footEmail}}</div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'footerComponent',
  data () {
    return {
      showEmail: false,
      showQrcode: false
    }
  },
  created () {
    document.addEventListener('click', () => {
      this.initShow()
    })
  },
  methods: {
    showWeiXinQrCode () {
      if (this.$config.footWechartQrcode) {
        this.showQrcode = !this.showQrcode
        if (this.showQrcode) this.showEmail = false
      }
    },
    toggleShowEmail () {
      if (this.$config.footEmail) {
        this.showEmail = !this.showEmail
        if (this.showEmail) this.showQrcode = false
      }
    },
    initShow () {
      this.showEmail = false
      this.showQrcode = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .Sharelinks {
    position: relative;
  }
  .foot-tip {
    position: absolute;
    /*bottom: 46px;*/
    right: 0;
    top: -170px;
  }
  .weichart-cont{
    background-color: #999;
    border: 2px solid #999;;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
  }
  .weichart-cont>img {
    height: 140px;
    width: 140px;
  }
  .weichart-cont>div{
    /*background-color: rgba(0,0,0,0.6);*/
    color: #fff;
    font-size: 14px;
  }
  .email-cont {
    margin-top: 120px;
    background-color: rgba(255,255,255,0.85);
    line-height: 30px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 14px;
  }
</style>
